<template>
	<div class="sidebar" id="sidebar-block">
		<el-menu
			class="sidebar-el-menu"
			:default-active="onRoutes"
			:collapse="collapse"
			background-color="#001935"
			text-color="#fff"
			active-text-color="#009FFF"
			unique-opened
			router
		>
			<template v-for="item in items">
				<template v-if="item.subs">
					<el-submenu :index="item.index" :key="item.index">
						<template slot="title">
							<div @click="menuSelect(item.index)">
								<i :class="item.icon"></i>
								<span slot="title">{{ item.title }}</span>
							</div>
						</template>
						<el-menu-item
							v-for="(subItem,i) in item.subs"
							:key="i"
							@click="menuSelect(subItem)"
							:index="subItem.index"
						>{{ subItem.title }}</el-menu-item>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index">
						<div @click="menuSelect(item.index)">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
						</div>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
export default {
	data() {
		return {
			collapse: false,
			loginInfo: {},
			// 显示的二级导航数组
			navArr: [],
			items: [],
		};
	},
	computed: {
		onRoutes() {
			return this.$route.path.replace("/", "");
		}
	},
	props: ["sideNav"],
	mounted() {
		this.init();
	},
	watch: {
		/**@augments 二级菜单对应的索引id
		 * 切换一级导航显示对应的二级导航
		 */
		sideNav() {
			this.initLoadMenu();
		}
	},
	created() {
		// 通过 Event Bus 进行组件间通信，来折叠侧边栏
		this.bus.$on("collapse", msg => {
			this.collapse = msg;
		});
	},
	methods: {
		/**
		 * 初始化，获取用户信息
		 */
		init() {
			this.loginInfo = this.$util.getLoginer();
			this.initLoadMenu();
		},
		/**
		 * 加载菜单项 modtype:'6'
		 */
		initLoadMenu() {
			this.items = [];
			this.$axios
				.post(
					this.httpRoot.BASEURL_UIM +
						"rest/uim/frame/frmmodel/loadmenus?loginsid=" +
						this.loginInfo.sessionId,
					{
						pid: "10000", //固定显示 this.sideNav,
						loginsid: this.loginInfo.sessionId,
						apptype: "20"
					}
				)
				.then(res => {
					if (res.data.result == "true") {
						let rootm = res.data.resultData; //
						//加载菜单内容
						for (var i = 0; i < rootm.children.length; i++) {
							var child = rootm.children[i];
							var m1 = {
								//icon: child.imgname ,
								index: child.modcode,
								title: child.modname,
								modfuncs: child.modfuncs,
								subs: []
							};
							//
							if ("children" in child) {
								for (var j = 0; j < child.children.length; j++) {
									var node2 = child.children[j];
									//
									var m2 = {
										//icon: node2.imgname ,
										index: node2.modcode,
										title: node2.modname,
										modfuncs: node2.modfuncs
									};
									m1.subs.push(m2);
								}
							}
							this.items.push(m1);
						}
					} else {
						// this.$error("加载失败" +res.data.resultMessage +",错误代码:" +res.data.resultCode);
					}
				})
				.catch(function(error) {
					//this.$error(error);
				});
		},
		menuSelect(pathname) {
			if (!pathname) return;
			if (parseInt(pathname)) return;
			this.$store.dispatch("visible/cache_bgWhite", true);
			this.$router.push({
				path: "/" + pathname.index,
				query: {
					modfuncs: pathname.modfuncs
				}
			});
		}
	}
};
</script>

<style scoped>
.sidebar {
	display: block;
	position: absolute;
	left: 0;
	/* top: 70px; */
	top: 0px;
	bottom: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
	width: 220px;
}

.sidebar > ul {
	height: 100%;
}
</style>
